<template>
  <el-dialog
    :title="control?'编辑部门':'新增部门'"
    :visible="dialogVisible"
    width="540px"
    @close="close"
  >
    <el-form ref="form" label-width="100px" :rules="rules" :model="deptList">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptList.name" size="mini" placeholder="2-10个字符" style="width:340px" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="deptList.code" size="mini" placeholder="2-10个字符" style="width:340px" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="deptList.managerId"
          size="mini"
          placeholder="请选择负责人"
          style="width:340px"
        >
          <el-option
            v-for="item in headList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          /></el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="deptList.introduce" type="textarea" :rows="4" placeholder="1-100个字符" style="width:340px" />
      </el-form-item>
      <el-form-item>
        <template>
          <el-row type="flex" justify="center">
            <el-button size="mini" type="primary" @click="btnOk">确定</el-button>
            <el-button size="mini" @click="close">取消</el-button>
          </el-row>
        </template>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getDashboard, getManagerList, addDepartment, getDepartmentDetail, modifyDepartment } from '@/api/department'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    fuid: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      deptList: { // 绑定表单用的
        code: '', // 部门编码
        introduce: '', // 部门介绍
        managerId: '', // 部门负责人
        name: '' // 部门名称
      },
      rules: {
        code: [{
          min: 2, max: 10, trigger: 'blur', message: '请输入2-10个字符'
        }, { required: true, message: '请输入字段', trigger: 'blur' }, { validator: async(rule, value, callback) => {
          // value就是输入的编码
          let result = await getDashboard()
          // result数组中是否存在 value值
          if (this.deptList.id) {
            // 就需要过滤一下这个数组
            result = result.filter(item => item.id !== this.deptList.id)
          }
          if (result.some(item => item.code === value)) {
            callback(new Error('部门中已经有该编码了'))
          } else {
            callback()
          }
        }, trigger: 'blur' }], // 部门编码
        introduce: [{
          min: 2, max: 10, trigger: 'blur', message: '请输入1-100个字符'
        }, { required: true, message: '请输入字段', trigger: 'blur' }], // 部门介绍
        managerId: [{ required: true, message: '请输入字段', trigger: 'blur' }], // 部门负责人
        name: [{
          min: 2, max: 10, trigger: 'blur', message: '请输入2-10个字符'
        }, { required: true, message: '请输入字段', trigger: 'blur' },
        {
          trigger: 'blur',
          // 自定义校验模式
          validator: async(rule, value, callback) => {
            let res = await getDashboard()
            if (this.deptList.id) {
            // 就需要过滤一下这个数组
              res = res.filter(item => item.id !== this.deptList.id)
            }
            // 要判断这个数组对象中 有没有name属性的值等于value的
            if (res.some(item => item.name === value)) {
              callback(new Error('重复了兄弟'))
            } else {
              callback()
            }
          }
        }]// 部门名称
      },
      headList: [] // 装负责人用的
    }
  }, computed: {
    control() {
      return this.deptList.id
    }
  },
  created() {
    this.getManagerList()
  },
  methods: {
    close() {
      this.deptList = this.$options.data().deptList
      this.$emit('dialogVisible', false)
      this.$refs.form.resetFields()
    },
    btnOk() { // 点击确定
      this.$refs.form.validate(async isok => {
        if (isok) {
          if (!this.deptList.id) {
            await addDepartment({ ...this.deptList, pid: this.fuid })
            this.$message.success('新增成功')
          } else {
            await modifyDepartment(this.deptList)
            this.$message.success('编辑成功')
          }
          // 告诉爹要刷新页面了
          this.$emit('refresh') // 重点
          this.close()
        }
      })
    },
    async getManagerList() { // 调部门详情的接口
      this.headList = await getManagerList()
      // console.log(this.headList)
    },
    async getDepartmentDetail() {
      this.deptList = await getDepartmentDetail(this.fuid)
    }
  }
}
</script>

<style>

</style>
